<!DOCTYPE html>
<html>
<head>
    <title>WEBSOCKET-POINT-TO-POINT</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/sockjs-client/1.6.1/sockjs.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/stomp.js/2.3.3/stomp.min.js"></script>
    <script>
        var stompClient = null;
        var addUserName = "虚拟用户";
        var usersList = [];

        function connect() {
            var socket = new SockJS('/ws');
            stompClient = Stomp.over(socket);
            stompClient.connect({}, function (frame) {
                console.log('Connected: ' + frame);
                stompClient.subscribe('/user/queue/reply', function (message) {
                    showMessage(JSON.parse(message.body));
                });
            });
        }

        function addUser() {
            var usernameInput = document.getElementById("username");
            var joinButton = document.getElementById("joinButton");
            usernameInput.disabled = true;
            joinButton.disabled = true;
            addUserName = usernameInput.value;

            if (addUserName && stompClient) {
                usersList.push(addUserName); // 将用户添加到列表中
                updateUsersDropdown(); // 更新用户下拉菜单

                var chatMessage = {
                    sender: addUserName,
                    content: addUserName + "~~已加入聊天!请注意财产安全",
                    type: 'JOIN'
                };
                stompClient.send("/app/chat.addUser", {}, JSON.stringify(chatMessage));
            }
        }

        function updateUsersDropdown() {
            var userDropdown = document.getElementById("userDropdown");
            userDropdown.innerHTML = ""; // 清空下拉菜单

            usersList.forEach(function(user) {
                var option = document.createElement("option");
                option.value = user;
                option.text = user;
                userDropdown.appendChild(option);
            });
        }

        function sendMessage() {
            var messageContent = document.getElementById("message").value;
            var targetUser = document.getElementById("userDropdown").value; // 获取选择的目标用户

            if (stompClient && targetUser) {
                stompClient.send("/app/chat.one.sendMessage", {}, JSON.stringify({
                    sender: addUserName,
                    content: messageContent,
                    targetUser: targetUser, // 将目标用户名添加到消息中
                    type: 'CHAT'
                }));
            }
        }

        function showMessage(message) {
            var response = document.getElementById("response");
            var p = document.createElement("p");
            p.appendChild(document.createTextNode(message.sender + ": " + message.content));
            response.appendChild(p);
        }

        function leaveChat() {
            if (stompClient) {
                var chatMessage = {
                    sender: addUserName,
                    content: addUserName + "~~已离开聊天",
                    type: 'LEAVE'
                };
                stompClient.send("/app/chat.leave", {}, JSON.stringify(chatMessage));
                setTimeout(function() {
                    stompClient.disconnect();
                    console.log("Disconnected");
                }, 500);
            }
        }

        window.onbeforeunload = function() {
            leaveChat();
        };
    </script>
</head>
<body onload="connect()">
<div>
    <input type="text" id="username" placeholder="输入您的姓名" />
    <button id="joinButton" onclick="addUser()">用户加入</button>
    <br>
    <select id="userDropdown">
        <option value="" disabled selected>选择目标用户</option>
    </select>
    <input type="text" id="message" placeholder="输入消息" />
    <button onclick="sendMessage()">发送信息</button>
    <br>
    <button onclick="leaveChat()">离开</button>
</div>
<div id="response"></div>
</body>
</html>
